<!doctype html>
<html>
	<head>
		<title>Climacons Font Demo</title>
		<link rel="stylesheet" href="climacons-font.css" />
		<style>
			section, header, footer {display: block;}
			body {
				font-family: sans-serif;
				color: #444;
				line-height: 1.5;
				font-size: 1em;
			}
			* {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			.glyph {
				font-size: 16px;
				float: left;
				text-align: center;
				background: #eee;
				padding: .75em;
				margin: .75em 1.5em .75em 0;
				width: 14em;
				border-radius: .25em;
				box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
			}
			.glyph input {
				width: 100%;
				padding: 0.25em;
				font-family: consolas, monospace;
				text-align: center;
				border: none;
			}
			.glyph input, .mtm {
				margin-top: .75em;
			}
			.w-main {
				width: 80%;
			}
			.centered {
				margin-left: auto;
				margin-right: auto;
			}
			.fs1 {
				font-size: 3em;
			}
			header {
				margin: 2em 0;
				padding-bottom: .5em;
				color: #666;
				box-shadow: 0 2px #eee;
			}
			header h1 {
				font-size: 2em;
				font-weight: normal;
			}
			.clearfix:before, .clearfix:after { content: ""; display: table; }
			.clearfix:after, .clear { clear: both; }
			footer {
				margin-top: 2em;
				padding: .5em 0;
				box-shadow: 0 -2px #eee;
				font-size: 13px;
			}
			a, a:visited {
				color: #FA4B00;
				text-decoration: none;
			}
			a:hover, a:focus {color: #000;}
			.box1 {
				font-size: 13px;
				display: inline-block;
				padding: .25em .5em;
				background: #eee;
				margin: .5em 1em .5em 0;

			}
			.box1 .climacon{
				font-size: 2em;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="w-main centered">
		<section class="mtm clearfix" id="glyphs">
			<header>
				<h1>Climacons Font 1.0 Glyphs</h1>
				<p>Climacons Font: a climatically categorised typeface for web and user interface designers.</p>
			</header>
			<div class="glyph">
				<span class="fs1 climacon cloud" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon cloud sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon cloud moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon rain" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon rain" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon rain sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon rain sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon rain moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon rain moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon showers" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon showers" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon showers sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon showers sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon showers moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon showers moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon downpour" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon downpour" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon downpour sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon downpour sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon downpour moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon downpour moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon drizzle" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon drizzle" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon drizzle sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon drizzle sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon drizzle moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon drizzle moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sleet" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sleet" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sleet sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sleet sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sleet moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sleet moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon hail" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon hail" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon hail sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon hail sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon hail moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon hail moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon flurries" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon flurries" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon flurries sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon flurries sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon flurries moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon flurries moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon snow" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon snow" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon snow sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon snow sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon snow moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon snow moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon fog" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon fog" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon fog sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon fog sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon fog moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon fog moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon haze" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon haze" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon haze sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon haze sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon haze moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon haze moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon wind" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon wind" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon wind cloud" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon wind cloud" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon wind cloud sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon wind cloud sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon wind cloud moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon wind cloud moon" />
			</div>
				<div class="glyph">
				<span class="fs1 climacon lightning" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon lightning" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon lightning sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon lightning sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon lightning moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon lightning moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sun" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sun" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sunset" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sunset" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sunrise" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sunrise" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sun low" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sun low" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sun lower" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sun lower" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon new" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon new" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waxing crescent" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waxing crescent" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waxing quarter" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waxing quarter" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waxing gibbous" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waxing gibbous" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon full" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon full" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waning gibbous" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waning gibbous" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waning quarter" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waning quarter" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon moon waning crescent" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon moon waning crescent" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon snowflake" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon snowflake" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon tornado" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon tornado" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer low" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer low" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer medium-low" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer medium-low" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer medium-high" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer medium-high" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer high" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer high" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon thermometer full" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon thermometer full" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon celcius celsius" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon celsius" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon fahrenheit" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon fahrenheit" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon compass" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon compass" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon compass north" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon compass north" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon compass east" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon compass east" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon compass south" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon compass south" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon compass west" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon compass west" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon umbrella" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon umbrella" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon sunglasses" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon sunglasses" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon cloud refresh" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud refresh" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon cloud up" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud up" />
			</div>
			<div class="glyph">
				<span class="fs1 climacon cloud down" aria-hidden="true"></span>
				<input type="text" readonly="readonly" value="climacon cloud down" />
			</div>

		</section>
		<div class="clear"></div>
		<section class="mtm clearfix" id="glyphs">
			<header>
				<h1>Expressive Class Names</h1>
			</header>
			<p>Climacons Font now uses expressive class names, which means you can do things like:</p>
			<span class="box1">
				<span aria-hidden="true" class="climacon cloud"></span>
				&nbsp; class="climacon cloud"
			</span>
			<span class="box1">
				<span aria-hidden="true" class="climacon sun showers"></span>
				&nbsp; class="climacon sun showers"
			</span>
			<span class="box1">
				<span aria-hidden="true" class="climacon full thermometer"></span>
				&nbsp; class="climacon full thermometer"
			</span>
			<span class="box1">
				<span aria-hidden="true" class="climacon waxing gibbous moon"></span>
				&nbsp; class="climacon waxing gibbous moon"
			</span>

		</section>
		<footer>
			<p>Climacons by <a href="http://twitter.com/#!/adamwhitcroft">@adamwhitcroft</a></p>
			<p>Font build and curated by <a href="http://twitter.com/#!/christiannaths">@christiannaths</a></p>
			<p>Font generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
		</footer>
		</div>
		<script>
		document.getElementById("glyphs").addEventListener("click", function(e) {
			var target = e.target;
			if (target.tagName === "INPUT") {
				target.select();
			}
		});
		</script>
	</body>
</html>
